<script setup>
import ConfigurationApi from '@/utils/api/ConfigurationApi.js'
import '@/assets/button.css'
import { reactive, ref } from 'vue'

const foundationConf = reactive({})
const messageConf = reactive({})
const chatroomConf = reactive({})

ConfigurationApi.getConfiguration().then(res=>{
  for(const i in res) {
    const node = res[i];
    if (node.key === 'mpp') {
      for(const i1 in node.nodeList) {
        foundationConf[node.nodeList[i1].key] = node.nodeList[i1];
      }
    } else if (node.key === 'mpmp') {
      for(const i1 in node.nodeList) {
        messageConf[node.nodeList[i1].key] = node.nodeList[i1];
      }
    } else if (node.key === 'mpcp') {
      for(const i1 in node.nodeList) {
        chatroomConf[node.nodeList[i1].key] = node.nodeList[i1];
      }
    }
  }
}).catch(err=>{
})
</script>
<template>
  <div class="configuration">
    <div style="height: 20px"></div>
    <div style="width: calc(100% - 20px); background-color: rgba(0,0,0,0); height: 40px; border-radius: 10px;">
      <button class="button" style="float: right; border-bottom-left-radius: 0; border-top-left-radius: 0; height: 100%;">查看原版文件</button>
      <button class="button" style="float: right; border-radius: 0; height: 100%;">待定2</button>
      <button class="button" style="float: right; border-top-right-radius: 0; border-bottom-right-radius: 0; height: 100%;">待定1</button>
    </div>
    <div class="title">基础</div>
    <div class="box">
      <div v-for="conf in foundationConf" class="box_row">
        <div class="row_title">{{conf.name}}</div>
        <el-tooltip class="box-item" effect="dark" :content="conf.key" placement="right">
          <div class="row_help">?</div>
        </el-tooltip>
        <div class="row_value">{{conf.value}}</div>
      </div>
    </div>
    <div class="title">消息配置</div>
    <div class="box">
      <div v-for="conf in messageConf" class="box_row">
        <div class="row_title">{{conf.name}}</div>
        <el-tooltip class="box-item" effect="dark" :content="conf.key" placement="right">
          <div class="row_help">?</div>
        </el-tooltip>
        <div class="row_value">{{conf.value}}</div>
      </div>
    </div>
    <div class="title">聊天室配置</div>
    <div class="box">
      <div v-for="conf in chatroomConf" class="box_row">
        <div class="row_title">{{conf.name}}</div>
        <el-tooltip class="box-item" effect="dark" :content="conf.key" placement="right">
          <div class="row_help">?</div>
        </el-tooltip>
        <div class="row_value">{{conf.value}}</div>
      </div>
    </div>
    <div style="height: 20px"></div>
  </div>
</template>
<style scoped>
.configuration {
  margin: 0 0 0 20px;
  height: 100%;
  width: calc(100% - 20px);
  overflow-y: auto;
}

.configuration .title {
  font-size: 20px;
  margin: 10px 0 5px 10px;
}

.configuration .box {
  background-color: rgba(255,255,255,1);
  padding: 20px 20px 10px 20px;
  border-radius: 10px;
  margin-right: 20px;
}

.box .box_row {
  height: 24px;
  margin: 0 0 10px 0;
  width: 100%;
}

.box_row .row_title {
  float: left;
  min-width: 50px;
  line-height: 24px;
}

.box_row .row_help {
  float: left;
  background-color: rgba(100,100,100,1);
  color: white;
  border-radius: 20px;
  line-height: 14px;
  margin: 5px 5px;
  width: 14px;
  text-align: center;
  font-size: 13px;
  user-select: none;
}

.box_row .row_value {
  float: right;
  min-width: 50px;
  text-align: center;
  line-height: 24px;
}



/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(0,0,0,0);
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  background-color: rgba(220,220,220,0);
  margin: 0;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  background-color: rgba(80,180,240,1);
  border-radius: 10px;
}
</style>